<template>
      <div class="photoinfo-container">
       <h3>{{ photoinfo.title }}</h3>
    <p class="subtitle">
      <span>发表时间：{{ photoinfo.add_time | dateFormat }}</span>
      <span>点击：{{ photoinfo.click }}次</span>
    </p>
    

        <div class="thumbs">
       
        <vue-preview :slides="slide1" @close="handleClose"></vue-preview>
        </div>

        <!-- 图片的图层-->
          <div class="content" v-html="photoinfo.content"></div>
         <!-- 坑-->
     <comment></comment>
      </div>
</template>
<script>
import comment from '../subcomponents/comment.vue'
    import {Toast} from 'mint-ui'
    export default {
        data(){
            return{
                 photoinfo: {}, // 图片详情
                   list: [] ,// 缩略图的数组
                  id:this.$route.params.id,
                  slide1: [
                        //图片id
                        ]
            }
        },
        created() {
            this.getphoto();
            this.getphotoList();
        },
        methods:{
                     handleClose () {
                        console.log('close event')
                   },
             async getphoto(){
                 const {data:res}= await this.$http.get("/api/getimageInfo/"+this.id)
                 // console.log(res);
                     if(res.status==0){
                   Toast('成功')
                 this.photoinfo=res.message[0]  
             }else{
                  Toast(res.message)
            }
             },
             async getphotoList(){
                 const {data:res} = await this.$http.get("api/getthumimages/" + this.id)
                  
                  if(res.status==0){
                        Toast('成功')
                         res.message.forEach(item => {
                          item.msrc= item.src
                            item.w = 600;
                            item.h = 400;
                        });
                        console.log(res);
                         this.slide1 = res.message;
                  }else{
                  Toast(res.message)
            }
             }
        },
          components: {
    // 用来注册子组件的节点
         comment
  }
    }
</script>
<style scoped>
   .photoinfo-container h3 {
    color: #26a2ff;
    font-size: 15px;
    text-align: center;
    margin: 15px 0;
}
.photoinfo-container .subtitle{
    display: flex;
    justify-content: space-between;
    font-size: 13px;
}
 .photoinfo-container .thumbs img{
    margin: 10px;
    box-shadow: 0 0 8px #999;
}
     /deep/ .my-gallery{
           display:flex;
            flex-wrap: wrap;
     }
  /deep/  img{
      width:120px;
      height:120px;
  }
</style>